<!-- 知识库 -->
<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
  const modules = document.querySelectorAll('.newmodule')
  const removerActive = () => {
    modules.forEach((module) => {
      module.classList.remove('active')
    })
  }
  modules.forEach((module) => {
    module.addEventListener('mouseover', () => {
      removerActive()
      module.classList.add('active')
    })
  })
})
</script>

<template>
  <div class="moduleBox">
    <div class="newmodule active">
      <h3>前端开发</h3>
    </div>
    <div class="newmodule">
      <h3>后端开发</h3>
    </div>
    <div class="newmodule">
      <h3>App开发</h3>
    </div>
    <div class="newmodule">
      <h3>电商系统</h3>
    </div>
    <div class="newmodule">
      <h3>方案设计</h3>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.moduleBox {
  display: flex;
  height: 520px;
  padding: 0 50px;
  // document.querySelectorAll 会获取到全局的类，所以这里重新起一个类名
  .newmodule {
    flex: 0.5;
    height: 100%;
    margin-right: 10px;
    // transition 的默认速度曲线是 ease
    transition: 0.6s;
    position: relative;
    cursor: pointer;
    &:nth-child(1) {
      background: url('https://images.unsplash.com/photo-1727846372246-b2c2aba91497?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
        no-repeat center / cover;
    }
    &:nth-child(2) {
      background: url('https://plus.unsplash.com/premium_photo-1727344750503-823bd3a146da?q=80&w=2575&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
        no-repeat center / cover;
    }
    &:nth-child(3) {
      background: url('https://images.unsplash.com/photo-1713781654565-ae4aef23f75b?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
        no-repeat center / cover;
    }
    &:nth-child(4) {
      background: url('https://images.unsplash.com/photo-1727799777485-4939c90326ad?q=80&w=2536&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
        no-repeat center / cover;
    }
    &:nth-child(5) {
      background: url('https://images.unsplash.com/photo-1726598036730-ed25a1cf1de2?q=80&w=2576&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
        no-repeat center / cover;
    }
    &.active {
      flex: 0.7;
      h3 {
        opacity: 1;
      }
      &::before {
        opacity: 1;
      }
    }
    h3 {
      font-size: 24px;
      position: absolute;
      bottom: 20px;
      left: 20px;
      margin: 0;
      opacity: 0;
      // ease-in 曲线比较适合做淡入效果
      transition: opacity 0.3s ease-in 0.1s;
      color: #ffffffda;
    }
    &::before {
      content: ''; // 写伪类注意加上内容
      position: absolute; // 对于伪类来说，position: absolute 是必要的，否则宽高不会生效
      width: 100%;
      height: 100%;
      background-color: rgba(1, 50, 32, 0.6);
      opacity: 0;
    }
  }
}
</style>
